<template>
	<view class="layout"
	    :class="themeType === 'dark' ? 'gross-dark' : ''"
	    style="min-height: 100%"
>
        <!-- 头部 -->
		<view class="daily-head">
			<view class="head-lf">
				<view class="head-date">{{date}}</view>
				<view class="head-mon">{{month}}月</view>
			</view>
			<view class="head-ct">
				<view>一晨看报</view>
			</view>
			<view class="head-rl" @tap="jumpTo">
				<image src="../../static/icon.jpg" style="width: 52px; height: 52px;border-radius: 50%;" ></image>
			</view>
		</view>
		<!-- 导入轮播图 -->
		<my-swiper v-bind:swiper="swiperList"></my-swiper>
		<!-- 导入阅读列表 -->
		<my-book v-bind:stort="stortList"></my-book>
		<!-- 导入历史列表 -->
		<my-his v-bind:his="hisList"></my-his>
	</view>
</template>

<script>
	// 导入轮播图组件
	import mySwiper from '../../components/myswiper.vue'
	// 导入阅读列表组件
	import myBook from '../../components/myBook.vue'
	// 导入历史列表
	import myHis from '../../components/myhit.vue'
	
	let url = "https://apis.netstart.cn/zhihudaily/stories/latest";
	
	export default {
		data() {
			return {
				date : '',
				month : '',
				currentTime: '',
				swiperList : [],
				stortList : [],
				hisList : [],
			}
		},
		onLoad() {
			this.getDate();
			this.getHis();
            this.getSwiper();
		},
		methods: {
			// 获取日期
			getDate(){
				let d = new Date();
				let year = d.getFullYear();
				let mon = d.getMonth() + 1;
				let date = d.getDate();

				
				this.date = date;
				this.month = mon;	
				
				if(mon >= 1 && mon <= 9){
					mon = "0" + mon;
				}
				if(date >= 0 && date <= 9){
					date = "0" + date;
				}
				
				let time = year + mon + date;
                this.currentTime = time;  				
			},
            getSwiper(){
				uni.request({
					url:url,
					method:"GET",
					success:(response)=>{
						let res = response.data;
						this.swiperList = res.top_stories;
						this.stortList = res.stories;
						// console.log(1,this.swiperList);
						// console.log(2,this.stortList);	
					},
					fail: () => {
						console.log("请求失败...")
					}
				})
			},
			// 获取历史数据
			getHis(){
				let urldate = 'https://apis.netstart.cn/zhihudaily/stories/before/'+this.currentTime;
				
				uni.request({
					url:urldate,
					method:"GET",
					success:(response)=>{
						let res = response.data;
						// 处理日期
						let date = res.date;
						let string = date.split('');
						
						let mon1 = string.splice(4,1);
						let mon2 = string.splice(3,1);
						let mon = mon1 + mon2;
						
						let day1 = string.splice(5,1);
						let day2 = string.pop(1);
						let day = day2 + day1;
						// console.log(day1,"day",day);
						
						let obj = {}
						obj.mon = mon;
						obj.date = day;
						obj.storie = res.stories;
						
						// console.log("obj",obj);
						
						this.hisList.push(obj);
						// console.log(this.hisList);
					},
					fail: () => {
						console.log("请求失败...")
					}
				})
			},
			jumpTo(){
				uni.navigateTo({
					url:"../../pages/login/login",
				})
			}
		},
		components:{
			"my-swiper":mySwiper,
			"my-book":myBook,
			"my-his":myHis
		},
		onReachBottom:function(){
			console.log("触底加载");
			--this.currentTime;
			let urldate = 'https://apis.netstart.cn/zhihudaily/stories/before/'+this.currentTime;
			// console.log("u",urldate);
			
			uni.request({
				url:urldate,
				method:"GET",
				success:(response)=>{
					let res = response.data;
					// 处理日期
					let date = res.date;
					let string = date.split('');
					
					let mon1 = string.splice(4,1);
					let mon2 = string.splice(3,1);
					let mon = mon1 + mon2;
					
					let day1 = string.splice(5,1);
					let day2 = string.pop(1);
					let day = day2 + day1;
					
					let newObj = {};
					newObj.mon = mon;
					newObj.date = day;
					newObj.storie = res.stories;
					console.log(1,newObj);
										
                    // console.log(this.hisList,111);
					this.hisList = this.hisList.concat(newObj);
					// console.log(this.hisList,1111)
				},
				fail: () => {
					console.log("请求失败...")
				}
			})
			
		}
	}
</script>

<style>
    .daily-head{
		width: 100%;
		height: 65px;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		z-index: 999;
		background-color: #fff;
	}
/* 	.daily-head>view{
		float: left;
	} */
	.daily-head .head-lf{
		width: 80px;
		height: 100%;
		text-align: center;
	}
	.daily-head .head-lf .head-date{
		font-size: 24px;
		padding-top: 5px;
		font-weight: bold;
	}
	.daily-head .head-lf .head-mon{
		padding-left: 10px;
		font-size: 15px;
	}
	.daily-head .head-ct{
		flex-grow: 1;
		line-height: 40px;
		padding-left: 10px;
		font-size: 22px;
		height: 40px;
		margin-top: 10px;
		/* font-weight: bold; */
		border-left: 1px solid #C0C0C0;
	}
	.daily-head .head-rl{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 15px;
		margin-top: 5px;
		/* border: 2px solid #c0c0c0; */
	}
</style>
